<template>
  <el-row class="GraphicVerificationCode">

    <el-input class="input-line" :value="value.code" @input="input_change" />
    <img class="img-line" :src="img_src" alt="验证码" @click="get_img">

  </el-row>
</template>

<script>
import { GetGraphicVerificationCode } from '@/api';

export default {
  name: 'GraphicVerificationCode',
  props: {
    value: {
      type: Object,
      default: null,
      required: true
    }
  },
  data() {
    return {
      img_src: '',
      img_key: ''
    }
  },
  created() {
    this.get_img()
  },
  methods: {
    input_change(val) {
      const args = {
        'code': val,
        'key': this.$data.img_key
      }
      this.$emit('input', args)
    },
    async get_img() {
      try {
        const response = await GetGraphicVerificationCode({})
        this.$data.img_src = response.data.codeUrl
        this.$data.img_key = response.data.key
        this.input_change(this.$props.value.code)
      } catch (e) {
        this.$message.error(`获取图形验证码错误`)
      }
    }
  }
}
</script>

<style scoped>
.input-line {
  width: calc(60% - 12px);
  margin-right: 12px
}

.img-line {
  height: 45px;
  width: 40%;
  object-fit: contain;
  display: inline-block
}

.img-line:hover {
  cursor: pointer;
}
</style>
